<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨境进口电商视频直播购物</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .glass-effect {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .live-indicator {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        .product-card-hover {
            transition: all 0.3s ease;
        }
        .product-card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .chat-bubble {
            animation: slideIn 0.3s ease-out;
        }
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        .dark-mode {
            background-color: #1a1a1a;
            color: #ffffff;
        }
        .dark-mode .glass-effect {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* 微交互动画 */
        .product-card {
            transition: all 0.3s ease;
        }
        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .btn-bounce {
            transition: all 0.2s ease;
        }
        .btn-bounce:hover {
            transform: scale(1.05);
        }
        .btn-bounce:active {
            transform: scale(0.95);
        }
        .cart-badge {
            animation: bounce 0.5s ease-in-out;
        }
        @keyframes bounce {
            0%, 20%, 60%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            80% {
                transform: translateY(-5px);
            }
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .pulse-glow {
            animation: pulseGlow 2s ease-in-out infinite;
        }
        @keyframes pulseGlow {
            0%, 100% {
                box-shadow: 0 0 5px rgba(139, 92, 246, 0.5);
            }
            50% {
                box-shadow: 0 0 20px rgba(139, 92, 246, 0.8);
            }
        }
        .video-container {
            position: relative;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            overflow: hidden;
        }
        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .play-button {
            width: 80px;
            height: 80px;
            background: rgba(255,255,255,0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .play-button:hover {
            transform: scale(1.1);
            background: rgba(255,255,255,1);
        }
        .floating-cart {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: #8b5cf6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
            transition: all 0.3s ease;
            z-index: 50;
        }
        .floating-cart:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
        }
        .floating-cart .cart-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }
        .product-showcase {
            animation: fadeInUp 0.8s ease-out;
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="bg-gray-50 transition-colors duration-300">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <h1 class="text-2xl font-bold text-purple-600">全球购直播</h1>
                    </div>
                    <div class="hidden md:block ml-10">
                            <div class="flex items-baseline space-x-4">
                                <a href="index.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">首页</a>
                                <a href="overseas-live-center.html" class="text-purple-600 px-3 py-2 rounded-md text-sm font-medium">直播中心</a>
                                <a href="overseas-shopping.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">海外购商城</a>
                                <a href="shopping-cart/index.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">购物车</a>
                            </div>
                        </div>
                </div>
                <div class="flex items-center space-x-4">
                    <!-- 购物车 -->
                    <div class="relative">
                        <button id="cart-btn" class="text-gray-600 hover:text-purple-600 p-2 rounded-full hover:bg-gray-100 btn-bounce pulse-glow">
                            <i class="fas fa-shopping-cart text-xl"></i>
                            <span id="cart-count" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center cart-badge">0</span>
                        </button>
                    </div>
                    <!-- 主题切换 -->
                    <button id="theme-toggle" class="text-gray-600 hover:text-purple-600 p-2 rounded-full hover:bg-gray-100">
                        <i class="fas fa-moon text-xl"></i>
                    </button>
                    <!-- 用户头像 -->
                    <div class="relative">
                        <button class="flex items-center space-x-2 text-gray-700 hover:text-purple-600">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像">
                            <span class="hidden md:block text-sm font-medium">用户</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧：视频直播区域 -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                    <!-- 视频播放器 -->
                    <div class="relative aspect-video bg-black">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="text-center text-white">
                                <i class="fas fa-play-circle text-6xl mb-4 opacity-80"></i>
                                <p class="text-lg">点击播放直播</p>
                            </div>
                        </div>
                        <!-- 直播状态指示器 -->
                        <div class="absolute top-4 left-4 flex items-center space-x-2">
                            <div class="live-indicator bg-red-500 h-3 w-3 rounded-full"></div>
                            <span class="bg-red-500 text-white px-2 py-1 rounded text-sm font-medium">直播中</span>
                        </div>
                        <!-- 观看人数 -->
                        <div class="absolute top-4 right-4 bg-black bg-opacity-50 text-white px-3 py-1 rounded-full text-sm">
                            <i class="fas fa-eye mr-1"></i>
                            <span>12,345 人观看</span>
                        </div>
                        <!-- 直播控制栏 -->
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-4">
                                    <button class="text-white hover:text-purple-300">
                                        <i class="fas fa-play text-xl"></i>
                                    </button>
                                    <button class="text-white hover:text-purple-300">
                                        <i class="fas fa-volume-up text-xl"></i>
                                    </button>
                                    <span class="text-white text-sm">00:45:23</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <button class="text-white hover:text-purple-300">
                                        <i class="fas fa-expand text-xl"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 直播间信息 -->
                    <div class="p-6">
                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <h2 class="text-2xl font-bold text-gray-900 mb-2">日本美妆专场直播</h2>
                                <p class="text-gray-600">主播小美的跨境美妆直播间</p>
                            </div>
                            <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
                                <i class="fas fa-plus mr-2"></i>关注
                            </button>
                        </div>
                        
                        <!-- 互动统计 -->
                        <div class="flex items-center space-x-6 text-gray-600">
                            <span><i class="fas fa-heart text-red-500 mr-1"></i> 8,234</span>
                            <span><i class="fas fa-comment mr-1"></i> 1,567</span>
                            <span><i class="fas fa-share mr-1"></i> 分享</span>
                        </div>
                    </div>
                </div>

                <!-- 聊天区域 -->
                <div class="bg-white rounded-lg shadow-lg mt-6">
                    <div class="p-4 border-b border-gray-200">
                        <h3 class="text-lg font-semibold text-gray-900">直播间聊天</h3>
                    </div>
                    <div id="chat-messages" class="h-64 overflow-y-auto p-4 space-y-3">
                        <div class="chat-bubble flex items-start space-x-3">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1494790108755-2616b612b5bc?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户">
                            <div>
                                <p class="text-sm font-medium text-gray-900">小美粉丝</p>
                                <p class="text-sm text-gray-600">这个口红颜色真好看！</p>
                            </div>
                        </div>
                        <div class="chat-bubble flex items-start space-x-3">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户">
                            <div>
                                <p class="text-sm font-medium text-gray-900">购物达人</p>
                                <p class="text-sm text-gray-600">支持跨境直邮吗？</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 border-t border-gray-200">
                        <div class="flex space-x-2">
                            <input type="text" placeholder="说点什么..." class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧：商品列表 -->
            <div class="space-y-6">
                <!-- 直播商品展示 -->
                <div class="bg-white rounded-lg shadow-lg">
                    <div class="p-4 border-b border-gray-200">
                        <h3 class="text-lg font-semibold text-gray-900">直播商品</h3>
                        <p class="text-sm text-gray-600 mt-1">点击商品查看详情并购买</p>
                    </div>
                    <div class="p-4 space-y-4">
                        <!-- 商品卡片 1 -->
                        <div class="product-card-hover bg-gray-50 rounded-lg p-4 cursor-pointer border-2 border-transparent hover:border-purple-300 product-card fade-in" onclick="showProductDetail(1)">
                            <div class="flex space-x-4">
                                <img src="https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="商品图片" class="w-20 h-20 object-cover rounded-lg">
                                <div class="flex-1">
                                    <h4 class="font-semibold text-gray-900 mb-1">SK-II 神仙水精华液</h4>
                                    <p class="text-sm text-gray-600 mb-2">230ml 日本原装进口</p>
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <span class="text-lg font-bold text-red-600">¥1,299</span>
                                            <span class="text-sm text-gray-500 line-through ml-2">¥1,599</span>
                                        </div>
                                        <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">直播价</span>
                                    </div>
                                    <div class="flex items-center mt-2 text-xs text-gray-500">
                                        <i class="fas fa-shipping-fast mr-1"></i>
                                        <span>包邮包税</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 商品卡片 2 -->
                        <div class="product-card-hover bg-gray-50 rounded-lg p-4 cursor-pointer border-2 border-transparent hover:border-purple-300 product-card fade-in" onclick="showProductDetail(2)">
                            <div class="flex space-x-4">
                                <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="商品图片" class="w-20 h-20 object-cover rounded-lg">
                                <div class="flex-1">
                                    <h4 class="font-semibold text-gray-900 mb-1">资生堂红腰子精华</h4>
                                    <p class="text-sm text-gray-600 mb-2">50ml 抗老修复</p>
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <span class="text-lg font-bold text-red-600">¥899</span>
                                            <span class="text-sm text-gray-500 line-through ml-2">¥1,199</span>
                                        </div>
                                        <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">直播价</span>
                                    </div>
                                    <div class="flex items-center mt-2 text-xs text-gray-500">
                                        <i class="fas fa-shipping-fast mr-1"></i>
                                        <span>包邮包税</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 商品卡片 3 -->
                        <div class="product-card-hover bg-gray-50 rounded-lg p-4 cursor-pointer border-2 border-transparent hover:border-purple-300 product-card fade-in" onclick="showProductDetail(3)">
                            <div class="flex space-x-4">
                                <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="商品图片" class="w-20 h-20 object-cover rounded-lg">
                                <div class="flex-1">
                                    <h4 class="font-semibold text-gray-900 mb-1">CPB钻石精华</h4>
                                    <p class="text-sm text-gray-600 mb-2">30ml 贵妇级护肤</p>
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <span class="text-lg font-bold text-red-600">¥2,599</span>
                                            <span class="text-sm text-gray-500 line-through ml-2">¥3,199</span>
                                        </div>
                                        <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">直播价</span>
                                    </div>
                                    <div class="flex items-center mt-2 text-xs text-gray-500">
                                        <i class="fas fa-shipping-fast mr-1"></i>
                                        <span>包邮包税</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 购买提示 -->
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-info-circle text-blue-500 mt-1"></i>
                        <div>
                            <h4 class="text-sm font-medium text-blue-900">跨境购买须知</h4>
                            <p class="text-sm text-blue-700 mt-1">
                                根据海关规定，跨境商品需要提供真实身份信息。单笔订单限额5000元，年度个人限额26000元。
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 快速购买按钮 -->
                <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg p-4 text-white text-center">
                    <h4 class="text-lg font-semibold mb-2">限时优惠</h4>
                    <p class="text-sm mb-3">直播间专属优惠券，仅限今日使用</p>
                    <button class="bg-white text-purple-600 px-6 py-2 rounded-lg font-medium hover:bg-gray-100 transition-colors">
                        立即领取
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 商品详情弹窗 -->
    <div id="product-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-4xl w-full max-h-screen overflow-y-auto">
            <div class="p-6">
                <div class="flex justify-between items-start mb-6">
                    <h2 class="text-2xl font-bold text-gray-900">商品详情</h2>
                    <button onclick="closeProductModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                
                <div id="product-detail-content">
                    <!-- 商品详情内容将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 购物车弹窗 -->
    <div id="cart-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-2xl w-full max-h-screen overflow-y-auto">
            <div class="p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-bold text-gray-900">购物车</h2>
                    <button onclick="closeCartModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                
                <div id="cart-content">
                    <!-- 购物车内容将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>
    </div>

    <script>
        // 主题切换功能
        const themeToggle = document.getElementById('theme-toggle');
        const body = document.body;
        
        // 检查系统主题偏好
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            body.classList.add('dark-mode');
            themeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>';
        }
        
        themeToggle.addEventListener('click', () => {
            body.classList.toggle('dark-mode');
            if (body.classList.contains('dark-mode')) {
                themeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>';
            } else {
                themeToggle.innerHTML = '<i class="fas fa-moon text-xl"></i>';
            }
        });
        
        // 购物车功能
        let cart = [];
        let cartCount = 0;
       // 更新购物车数量
        function updateCartCount() {
            const cartCountElement = document.getElementById('cart-count');
            cartCountElement.textContent = cartCount;
            // 添加弹跳动画
            cartCountElement.classList.add('cart-badge');
            setTimeout(() => {
                cartCountElement.classList.remove('cart-badge');
            }, 500);
        }
        
        function addToCart(product) {
            cart.push(product);
            cartCount++;
            updateCartCount();
            showNotification('商品已添加到购物车！');
        }
        
        // 商品详情数据
        const products = {
            1: {
                id: 1,
                name: 'SK-II 神仙水精华液',
                subtitle: '230ml 日本原装进口',
                price: 1299,
                originalPrice: 1599,
                image: 'https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
                description: 'SK-II 神仙水是一款备受赞誉的护肤精华，含有90%以上的Pitera™成分，能够改善肌肤质地，提升肌肤光泽度。',
                features: [
                    '含有90%以上Pitera™成分',
                    '改善肌肤质地和光泽',
                    '日本原装进口',
                    '适合各种肌肤类型'
                ],
                specifications: {
                    '容量': '230ml',
                    '产地': '日本',
                    '保质期': '3年',
                    '适用肌肤': '所有肌肤类型'
                },
                compliance: {
                    '海关备案': '已备案',
                    '检验检疫': '已通过',
                    '中文标签': '符合要求',
                    '税率': '13%（跨境电商综合税）'
                }
            },
            2: {
                id: 2,
                name: '资生堂红腰子精华',
                subtitle: '50ml 抗老修复',
                price: 899,
                originalPrice: 1199,
                image: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
                description: '资生堂红腰子精华是一款多功能的抗老修复精华，能够提升肌肤免疫力，改善细纹和皱纹。',
                features: [
                    '提升肌肤免疫力',
                    '抗老修复功效',
                    '改善细纹皱纹',
                    '质地轻盈易吸收'
                ],
                specifications: {
                    '容量': '50ml',
                    '产地': '日本',
                    '保质期': '3年',
                    '适用肌肤': '成熟肌肤'
                },
                compliance: {
                    '海关备案': '已备案',
                    '检验检疫': '已通过',
                    '中文标签': '符合要求',
                    '税率': '13%（跨境电商综合税）'
                }
            },
            3: {
                id: 3,
                name: 'CPB钻石精华',
                subtitle: '30ml 贵妇级护肤',
                price: 2599,
                originalPrice: 3199,
                image: 'https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
                description: 'CPB钻石精华是肌肤之钥的顶级护肤产品，采用珍贵成分，提供极致的护肤体验。',
                features: [
                    '珍贵钻石粉末成分',
                    '极致抗老功效',
                    '奢华护肤体验',
                    '显著提升肌肤状态'
                ],
                specifications: {
                    '容量': '30ml',
                    '产地': '日本',
                    '保质期': '3年',
                    '适用肌肤': '成熟肌肤'
                },
                compliance: {
                    '海关备案': '已备案',
                    '检验检疫': '已通过',
                    '中文标签': '符合要求',
                    '税率': '13%（跨境电商综合税）'
                }
            }
        };
        
        // 显示商品详情
        function showProductDetail(productId) {
            const product = products[productId];
            if (!product) return;
            
            const modal = document.getElementById('product-modal');
            const content = document.getElementById('product-detail-content');
            
            content.innerHTML = `
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- 商品图片 -->
                    <div>
                        <img src="${product.image}" alt="${product.name}" class="w-full h-96 object-cover rounded-lg">
                        <div class="flex space-x-2 mt-4">
                            <img src="${product.image}" alt="缩略图" class="w-16 h-16 object-cover rounded border-2 border-purple-500">
                            <img src="${product.image}" alt="缩略图" class="w-16 h-16 object-cover rounded border border-gray-200">
                            <img src="${product.image}" alt="缩略图" class="w-16 h-16 object-cover rounded border border-gray-200">
                        </div>
                    </div>
                    
                    <!-- 商品信息 -->
                    <div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">${product.name}</h3>
                        <p class="text-gray-600 mb-4">${product.subtitle}</p>
                        
                        <!-- 价格 -->
                        <div class="flex items-center space-x-4 mb-6">
                            <span class="text-3xl font-bold text-red-600">¥${product.price}</span>
                            <span class="text-lg text-gray-500 line-through">¥${product.originalPrice}</span>
                            <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-sm">直播专享价</span>
                        </div>
                        
                        <!-- 商品描述 -->
                        <div class="mb-6">
                            <h4 class="font-semibold text-gray-900 mb-2">商品描述</h4>
                            <p class="text-gray-600 text-sm">${product.description}</p>
                        </div>
                        
                        <!-- 商品特点 -->
                        <div class="mb-6">
                            <h4 class="font-semibold text-gray-900 mb-2">商品特点</h4>
                            <ul class="space-y-1">
                                ${product.features.map(feature => `<li class="flex items-center text-sm text-gray-600"><i class="fas fa-check text-green-500 mr-2"></i>${feature}</li>`).join('')}
                            </ul>
                        </div>
                        
                        <!-- 规格参数 -->
                        <div class="mb-6">
                            <h4 class="font-semibold text-gray-900 mb-2">规格参数</h4>
                            <div class="bg-gray-50 rounded-lg p-4">
                                ${Object.entries(product.specifications).map(([key, value]) => `
                                    <div class="flex justify-between py-2 border-b border-gray-200 last:border-b-0">
                                        <span class="text-sm text-gray-600">${key}</span>
                                        <span class="text-sm font-medium text-gray-900">${value}</span>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                        
                        <!-- 合规信息 -->
                        <div class="mb-6">
                            <h4 class="font-semibold text-gray-900 mb-2">合规信息</h4>
                            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                                ${Object.entries(product.compliance).map(([key, value]) => `
                                    <div class="flex justify-between py-1">
                                        <span class="text-sm text-green-700">${key}</span>
                                        <span class="text-sm font-medium text-green-900">${value}</span>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                        
                        <!-- 购买按钮 -->
                        <div class="flex space-x-4">
                            <button onclick="addToCart(${JSON.stringify(product).replace(/"/g, '&quot;')})" class="flex-1 bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition-colors font-medium">
                                <i class="fas fa-shopping-cart mr-2"></i>加入购物车
                            </button>
                            <button onclick="buyNow(${product.id})" class="flex-1 bg-red-600 text-white py-3 rounded-lg hover:bg-red-700 transition-colors font-medium">
                                立即购买
                            </button>
                        </div>
                        
                        <!-- 购买提示 -->
                        <div class="mt-4 bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                            <div class="flex items-start space-x-2">
                                <i class="fas fa-exclamation-triangle text-yellow-600 mt-1"></i>
                                <div class="text-xs text-yellow-800">
                                    <p class="font-medium">跨境购买提醒：</p>
                                    <p>需要提供真实身份信息用于海关清关，单笔订单限额5000元。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            modal.classList.remove('hidden');
        }
        
        // 关闭商品详情弹窗
        function closeProductModal() {
            document.getElementById('product-modal').classList.add('hidden');
        }
        
        // 显示购物车
        function showCart() {
            const modal = document.getElementById('cart-modal');
            const content = document.getElementById('cart-content');
            
            if (cart.length === 0) {
                content.innerHTML = `
                    <div class="text-center py-12">
                        <i class="fas fa-shopping-cart text-6xl text-gray-300 mb-4"></i>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">购物车是空的</h3>
                        <p class="text-gray-500 mb-6">快去挑选心仪的商品吧！</p>
                        <button onclick="closeCartModal()" class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition-colors">
                            继续购物
                        </button>
                    </div>
                `;
            } else {
                const subtotal = cart.reduce((sum, item) => sum + item.price, 0);
                const tax = Math.round(subtotal * 0.13); // 13%税率
                const total = subtotal + tax;
                
                content.innerHTML = `
                    <div class="space-y-4">
                        <!-- 购物车商品列表 -->
                        <div class="space-y-4">
                            ${cart.map((item, index) => `
                                <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
                                    <img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded">
                                    <div class="flex-1">
                                        <h4 class="font-medium text-gray-900">${item.name}</h4>
                                        <p class="text-sm text-gray-600">${item.subtitle}</p>
                                        <p class="text-sm font-medium text-gray-900 mt-1">¥${item.price}</p>
                                    </div>
                                    <button onclick="removeFromCart(${index})" class="text-red-500 hover:text-red-700">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            `).join('')}
                        </div>
                        
                        <!-- 费用明细 -->
                        <div class="bg-gray-50 rounded-lg p-4 space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">商品小计</span>
                                <span class="font-medium">¥${subtotal}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">跨境电商综合税 (13%)</span>
                                <span class="font-medium">¥${tax}</span>
                            </div>
                            <div class="border-t border-gray-200 pt-2">
                                <div class="flex justify-between">
                                    <span class="font-semibold">总计</span>
                                    <span class="font-bold text-lg text-red-600">¥${total}</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 身份信息输入 -->
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <h4 class="font-medium text-blue-900 mb-3">身份信息（海关清关所需）</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-blue-700 mb-1">真实姓名</label>
                                    <input type="text" placeholder="请输入真实姓名" class="w-full border border-blue-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-blue-700 mb-1">身份证号</label>
                                    <input type="text" placeholder="请输入身份证号" class="w-full border border-blue-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                            </div>
                            <p class="text-xs text-blue-600 mt-2">
                                <i class="fas fa-shield-alt mr-1"></i>
                                您的身份信息仅用于海关清关，我们将严格保密。
                            </p>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="flex space-x-4">
                            <button onclick="closeCartModal()" class="flex-1 border border-gray-300 text-gray-700 py-3 rounded-lg hover:bg-gray-50 transition-colors">
                                继续购物
                            </button>
                            <button onclick="proceedToCheckout()" class="flex-1 bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition-colors font-medium">
                                去结算
                            </button>
                        </div>
                    </div>
                `;
            }
            
            modal.classList.remove('hidden');
        }
        
        // 关闭购物车弹窗
        function closeCartModal() {
            document.getElementById('cart-modal').classList.add('hidden');
        }
        
        // 从购物车移除商品
        function removeFromCart(index) {
            cart.splice(index, 1);
            cartCount--;
            updateCartCount();
            showCart(); // 刷新购物车显示
        }
        
        // 立即购买
        function buyNow(productId) {
            const product = products[productId];
            if (product) {
                addToCart(product);
                showCart();
                closeProductModal();
            }
        }
        
        // 去结算
        function proceedToCheckout() {
            closeCartModal();
            window.location.href = 'payment/index.html';
        }
        
        // 显示通知
        function showNotification(message) {
            const notification = document.createElement('div');
            notification.className = 'fixed top-20 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
            notification.innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fas fa-check-circle"></i>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
        
        // 事件监听器
        document.getElementById('cart-btn').addEventListener('click', showCart);
        
        // 点击弹窗外部关闭弹窗
        document.getElementById('product-modal').addEventListener('click', (e) => {
            if (e.target.id === 'product-modal') {
                closeProductModal();
            }
        });
        
        document.getElementById('cart-modal').addEventListener('click', (e) => {
            if (e.target.id === 'cart-modal') {
                closeCartModal();
            }
        });
        
        // 添加聊天消息
        function addChatMessage(user, message) {
            const chatMessages = document.getElementById('chat-messages');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'chat-bubble flex items-start space-x-3';
            messageDiv.innerHTML = `
                <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1494790108755-2616b612b5bc?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户">
                <div>
                    <p class="text-sm font-medium text-gray-900">${user}</p>
                    <p class="text-sm text-gray-600">${message}</p>
                </div>
            `;
            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        // 模拟聊天消息
        setTimeout(() => {
            addChatMessage('主播小美', '宝宝们，SK-II神仙水现在直播价只要1299元哦！');
        }, 5000);
        
        setTimeout(() => {
            addChatMessage('购物达人', '已经下单了，期待收货！');
        }, 8000);
    </script>
</body>
</html>